<template>
  <div class="dashboard-container">
    <select-project class="selectProject"></select-project>
    <div class="top">
      <div class="top-content">
        <div class="circle">
          <div class="main-number-show">
            <span>总计{{ caseCntList[3]['cnt'] }}个</span>
          </div>
          <div class="circle-title">本周新增: {{ caseIncrementCnt }} 个</div>
        </div>
        <div class="case-content">
          <div class="top-title">用例数量统计</div>
          <div class="level-content">
            <div class="level-num">
              <div class="level">P0</div>
              <div>{{ caseCntList[0]['cnt'] }}</div>
            </div>
            <div class="level-num">
              <div class="level">P1</div>
              <div>{{ caseCntList[1]['cnt'] }}</div>
            </div>
            <div class="level-num" style="border-right: 0">
              <div class="level">P2</div>
              <div>{{ caseCntList[2]['cnt'] }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-content" style="margin: 0">
        <div class="circle">
          <div class="main-number-show">
            <span>总计{{ planCntList[2]['cnt'] }}个</span>
          </div>
          <div class="circle-title">本周新增: {{ planIncrementCnt }} 个</div>
        </div>
        <div class="case-content">
          <div class="top-title">执行计划数量统计</div>
          <div class="level-content">
            <div class="level-num1">
              <div class="level">开启告警</div>
              <div>{{ planCntList[0]['cnt'] }}</div>
            </div>
            <div class="level-num1" style="border-right: 0">
              <div class="level">未开告警</div>
              <div>{{ planCntList[1]['cnt'] }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="content-first">
        <bar-chart id="bar1" ref="bar1" title="近一周用例/计划新增数" legend1="用例新增数" legend2="计划新增数"
                   :xAxisData="dateList"
                   :seriesData1="caseIncrementList"
                   :seriesData2="planIncrementList"
        ></bar-chart>
      </div>
      <div class="content-second" style="margin: 0">
        <bar-chart id="bar2" ref="bar2" title="近一周用例/计划执行次数" legend1="用例执行次数" legend2="计划执行次数"
                   :xAxisData="dateList"
                   :seriesData1="caseRunCntList"
                   :seriesData2="planRunCntList"
        ></bar-chart>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <bar-chart id="bar3" ref="bar3" title="近一周用例执行失败TOP10"
                   :xAxisData="caseNameFailList"
                   :seriesData1="caseFailCntList"
                   :seriesData2="planRunCntList"
        ></bar-chart>
      </div>
      <div class="bottom-right">
        <bar-chart id="bar4" ref="bar4" title="近一周计划执行失败TOP10" type="line"
                   :xAxisData="planNameFailList"
                   :seriesData1="planFailCntList"
                   :seriesData2="planRunCntList"
        ></bar-chart>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from './charts/barChart'
import SelectProject from '@/components/SelectProject'

export default {
  name: 'dashboard',
  components: {BarChart,SelectProject},
  data() {
    return {
      projectId: window.sessionStorage.getItem("projectId"),
      dateList: [],
      planIncrementList: [],
      caseIncrementList: [],
      caseIncrementCnt: 0,
      planIncrementCnt: 0,
      caseCntList: [{
        "level": "P0",
        "cnt": 0
      }, {"level": "P1", "cnt": 0}, {"level": "P2", "cnt": 0}, {"level": "P3", "cnt": 0}],
      planCntList: [{"cnt": 0},{"cnt": 0},{"cnt": 0}],
      caseRunCntList:[],
      planRunCntList:[],
      caseNameFailList:[],
      caseFailCntList:[],
      planNameFailList:[],
      planFailCntList:[],
    }
  },
  created() {
    if (!window.sessionStorage.getItem("projectId")) {
      this.$message.info("WEB测试相关的功能，需要先在统计图表模块页面选择项目！")
    }
  },
  mounted() {
    this.getHomeData()
  },
  methods: {
    getHomeData() {
      if(this.projectId){
        this.api({url: `/getHomeData/${this.projectId}`, method: "get"}).then((resp) => {
          // 近一周用例/计划新增数
          this.caseCntList = resp.caseCntList
          this.caseIncrementList = resp.caseIncrementList
          this.dateList = resp.dateList
          this.planCntList = resp.planCntList
          this.planIncrementList = resp.planIncrementList
          this.caseIncrementCnt = eval(this.caseIncrementList.join("+"))
          this.planIncrementCnt = eval(this.planIncrementList.join("+"))
          this.$refs.bar1.updateChart(this.dateList, this.caseIncrementList, this.planIncrementList);
          // 近一周用例/计划执行次数
          this.caseRunCntList = resp.caseRunCntList
          this.planRunCntList = resp.planRunCntList
          this.$refs.bar2.updateChart(this.dateList, this.caseRunCntList, this.planRunCntList);
          // 近一周用例失败TOP10
          this.caseNameFailList = resp.caseNameFailList
          this.caseFailCntList = resp.caseFailCntList
          this.$refs.bar3.updateChart(this.caseNameFailList, this.caseFailCntList);
          // 近一周用例失败TOP10
          this.planNameFailList = resp.planNameFailList
          this.planFailCntList = resp.planFailCntList
          this.$refs.bar4.updateChart(this.planNameFailList, this.planFailCntList);
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.selectProject {
  position: relative;
  top: -8px;
}
.dashboard-container {
  //height: calc(100vh - 150px);
  //padding: 20px;
  //background-color: white;
  margin: 20px;
}

img {
  height: 200px;
  display: flex;
}

.top {
  display: flex;
  margin-bottom: 20px;

  .top-content {
    background-color: white;
    display: flex;
    width: 100%;
    height: 200px;
    margin-right: 20px;

    .circle {
      width: 180px;
      text-align: center;
      padding: 20px;
      height: 100%;

      .main-number-show {
        width: 120px;
        height: 120px;
        border-style: solid;
        border-width: 7px;
        border-color: #0044f0;
        border-radius: 50%;
        line-height: 106px;
      }

      .circle-title {
        margin-top: 20px;
        width: 140px;
      }
    }

    .case-content {
      display: flex;
      flex-direction: column; //纵向
      width: 100%;
      //justify-content: center;
      //align-items: center;
    }

    .level-content {
      width: 100%;
      height: 70px;
      display: flex;
      margin: 10px auto
    }

    .level-num {
      width: 33%;
      border-right: 1px solid #ddd;
      padding: 0 10%;
    }

    .level-num1 {
      width: 50%;
      border-right: 1px solid #ddd;
      padding: 0 10%;
    }

    .level {
      margin-bottom: 30px;
    }

    .top-title {
      height: 80px;
      line-height: 80px;
      margin: 0 auto;
      font-size: 18px;
      font-weight: 500;
      text-overflow: ellipsis;
      overflow: hidden;
      word-wrap: break-word;
      white-space: nowrap;
    }

    .bottom-title {
      margin: 10px 0 10px 10px;
    }
  }
}

.content {
  display: flex;
  margin-bottom: 20px;

  .content-first {
    width: 100%;
    height: 280px;
    margin-right: 20px;
    background-color: white;
  }

  .content-second {
    background-color: white;
    width: 100%;
    height: 280px;
    margin-right: 20px;
  }
}

.bottom {
  display: flex;
  margin-bottom: 20px;

  .bottom-left {
    background-color: white;
    width: 50%;
    height: 280px;
    margin-right: 20px;
  }

  .bottom-right {
    background-color: white;
    width: 50%;
    height: 280px;
  }
}

</style>
